<template>
    <el-main>
        <el-table :data="menus" row-key="id">
            <el-table-column label="ID">
                <template slot-scope="scope">
                    <i
                        class="el-icon-minus"
                        :style="scope.row.ftitle==null ? 'margin-left:10px':'margin-left:50px'"
                    ></i>
                    {{ scope.row.id }}
                </template>
            </el-table-column>

            <el-table-column label="Menu Title">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.title }}</span>
                </template>
            </el-table-column>

            <el-table-column label="URL">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.url }}</span>
                </template>
            </el-table-column>

            <el-table-column>
                <template slot="header" slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="handleAdd(scope.$index);"
                        icon="el-icon-plus"
                        disabled
                    ></el-button>
                </template>
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row);"
                        disabled
                        icon="el-icon-edit"
                    ></el-button>
                    <el-button
                        size="mini"
                        disabled
                        @click="handleDelete(scope.$index, scope.row);"
                        icon="el-icon-delete"
                    ></el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-main>
</template>

<script>
import Vue from "vue";

export default {
    name: `adminMenuMgmt`,
    data: function() {
        return {
            menus: []
        };
    },
    mounted: function() {
        this.load();
    },
    methods: {
        load() {
            this.menus = [];
            Vue.axios
                .get(`/api/admin/adminmenu/query/listAdminMenus`)
                .then(response => {
                    this.menus = response.data;
                })
                .catch(error => {
                    // console.log(JSON.stringify(error));
                    this.$router.push("/ui/login");
                });
        },
        handleAdd(index) {},
        handleEdit(index, row) {},
        handleDelete(index, row) {}
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus"></style>
